<20230914> Day13. Class 之一

2023 iThome 鐵人賽

DAY 13

自我挑戰組

Rayeee 的 TypeScript 的學習日記系列第 13 篇

15th鐵人賽

rayeee

2023-09-14 22:54:09

256 瀏覽

分享至

今天來記錄一下進入 TypeScript 實作前的最後一個重點 => Class

如前面所說，TypeScript 作為 JavaScript 的超集，JavaScript class 的功能 TypeScript 都有，JavaScript class 的概念從 ES2015(ES6) 開始引入，可以幫助我們在 JavaScript 中更能使用到物件導向的優勢，而 TypeScript 也有更進一步的引入了其他功能如 Modifiers，更加完善了這個優勢。

但是在 JavaScript 中的物件導向與 Java、C++ 的實現方式不同，JavaScript 中的 Class 只是語法糖，底層還是用原型鍊的概念去實作
有興趣可以閱讀這篇該來理解 JavaScript 的原型鍊了
但這牽扯到有點深了，很多知識點還在我的戰爭迷霧中
所以！這邊是簡單介紹一下 class 以及一些基本的語法

關於 class 的大綱：

class 簡介 & 語法
基本的繼承 Inheritance
修飾符 Modifiers
建構子 Constructor
繼承的使用 Inheritance
Class 小結

這邊會分兩天紀錄，之後應該會在抓一天紀錄查文章時，找到的值得紀錄知識點

今天會記錄的：

class 簡介 & 語法
基本的繼承 Inheritance
修飾符 Modifiers

class 簡簡簡介

可以把 Class 想像成一個藍圖，我們可以使用這個藍圖來創造一個對象
這個對象會有自己的方法和屬性 (Methods & Properties)

讓我們先來看看 ES6 JavaScript 寫法中 class 的範例，與在 TypeScript 中的寫法 (基本上就只加上型別)
先來看看怎麼寫，下面再來一一解釋

class 的名稱，首字母要 大寫
constructor 裡面代表這個 class 的屬性 (Properties)
class 有自己的方法 (Methods) attack() 和 printHp()
可以用 new 方法依照這個 class 藍圖，建立一個實體 (Instance)，建立實體時，需要依照藍圖傳入設定好的參數
用 new 建立的實體 (Instance) 裡面會有這個藍圖的所有方法

class Monster {
    constructor(name, hp, mp) {
        this.name = name;
        this.hp = hp;
        this.mp = mp;
    }
    attack() {
        return `${this.name} attack!!`;
    }
	printHp() {
		console.log(`Hp = ${this.hp}`);
	}
}

// TypeScript
class Monster {
    name: string;
    hp: number;
    mp: number;

    constructor(name: string, hp: number, mp: number) {
        this.name = name;
        this.hp = hp;
        this.mp = mp;
    }

    attack(): string {
        return `${this.name} attack!!`;
    }

    printHp(): void {
        console.log(`Hp = ${this.hp}`);
    }
}

const godzilla = new Monster('godzilla', 100, 100)

console.log(godzilla.attack())				// "godzilla attack!!"

基本的繼承 Inheritance

繼承系統 extends

class 可以繼承其他 class，可以想像繼承時會連裡面的方法一起繼承過來
也可以改變繼承過來的方法
繼承完之後，我們會說 class Monster 是父類別 (super)，class DeadMonster 是子類別 (child)

class Monster {
    name: string;
    hp: number;
    mp: number;

    constructor(name: string, hp: number, mp: number) {
        this.name = name;
        this.hp = hp;
        this.mp = mp;
    }

    attack(): string {
        return `${this.name} attack!!`;
    }

    printHp(): void {
        console.log(`Hp = ${this.hp}`);
    }
}

class DeadMonster extends Monster {
    printHp(): void {
        console.log(`I am dead monster...`);
    }
}

const godzilla = new Monster('godzilla', 100, 100)
const ghidorah = new DeadMonster('ghidorah', 0, 0)

godzilla.printHp()		// "Hp = 100" 
ghidorah.printHp()		// "I am dead monster..."

class 的修飾符 Modifiers (public, private, protedted)

修飾符 Modifiers 是 JavaScript ES6 和 TypeScript 兩邊 class 的差別之一

JavaScript 中 class 的屬性和方法默認都是公開的，只有在其他語言如 Java, C# 才有修飾符的概念
TypeScript 引入了修飾符，讓我們可以更準確的控制 class 內的的成員，在 class 的中的每一個方法及屬性都有自己的修飾符

public 公開屬性

意味著可以在任何地方 (class 內部、外部、子類中等等...)，任意的調用此屬性
都沒加的話，預設就會是 public 屬性

class Monster {
    public attack(): string {
        return `attack!!`;
    }

    defense(): void {
        console.log('defense~');
    }
}

const godzilla = new Monster();
godzilla.attack();
godzilla.defense();

class DeadMonster extends Monster {
    attack(): string {
        return 'I am dead monster...'
    }
}

const ghidorah = new DeadMonster()
ghidorah.attack();
ghidorah.defense();

private 私有屬性

意味著不可從外部調用，只有該 Class 內部可以調用，連子類都無法調用

protected 保護屬性

意味著該 class 中的其他方法及子類可以調用，但是外部無法調用

All about Modifiers

為什麼我們要關注這些 Modifiers？
- 我們不會因為任何的安全性問題，而使用私有方法（private）
  - 使用 private 不會增加程式碼的安全性哦
  - 這邊指的安全性是資安方面的安全性
- 標記為 private 的唯一原因是限制其他開發人員調用此方法
  - 如果有一個方法非常複雜，我們不相信其他開發者能夠安全的調用，可能會破壞到其他東西，這時我們就會用 private 限制

以上是今天的內容，明天繼續補齊建構子 Constructor 和在記錄一些繼承的使用。